.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: *;
height: *;
overflow: auto;
background-color: rgb(0
0
0);
background-color: rgba(0
0
0
0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
以上是一个简单的HTML弹窗提示示例代码。
首先,我们在头部样式部分定义了弹窗的样式,包括弹窗的背景,内容区域以及关闭按钮的样式。
在body标签中,我们添加了一个按钮,当点击这个按钮时,会调用showModal()函数显示弹窗。
接着,我们创建了一个
在JavaScript部分,我们定义了showModal()和hideModal()两个函数,分别用于显示和隐藏弹窗。showModal()函数将弹窗的display属性设置为"block",使其显示出来;hideModal()函数将display属性设置为"none",使其隐藏起来。
*,我们通过给弹窗的
通过以上代码,你可以在点击"显示弹窗"按钮时显示弹窗,在弹窗区域外或点击关闭按钮时隐藏弹窗。你可以根据自己的需求修改弹窗内容和样式。
咨询微信客服
0516-6662 4183
立即获取方案或咨询top